<template>
    <div style="width: 100%;position: relative;height: 100%;">
        
        <div id="search">
            <el-form :model="listQuery" :inline="true" ref="formQuery" label-width="80px"
                     :label-position="labelPosition">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="名字" prop="name">
                            <el-input size="small" style="width: 75%" v-model="listQuery.name" placeholder="请输入药品名"
                                      clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="类别" prop="drugTypeId">
                            <el-select size="small" style="width: 75%" v-model="listQuery.drugTypeId" placeholder="请选择药品类别"
                                       clearable>
                                <el-option  :key="item.id" v-for ="item in drugTypeList" :label="item.typeName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="保质期" prop="shelfLife">
                            <el-select style="width: 75%" size="small" v-model="listQuery.shelfLife" placeholder="请选择保质期"
                                       clearable>
                                <el-option label="一个月" value="30"></el-option>
                                <el-option label="三个月" value="90"></el-option>
                                <el-option label="半年" value="180"></el-option>
                                <el-option label="一年" value="360"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="库位" prop="space">
                            <el-input size="small" style="width: 75%" v-model="listQuery.space" placeholder="请输入库位"
                                      clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="9">
                        <el-form-item label="生产日期" prop="date" >
                                <el-date-picker style="width: 60%" size="small" v-model="date"  value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8" :offset="2">
                        <el-form-item>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="search"></el-button>
                            <!--<el-button size="small" type="success" icon="el-icon-plus" @click="handleAdd"></el-button>-->
                            <el-button size="small" type="success"  @click="handleAdd">新增药品信息</el-button>
                            <el-button size="small" type="success"  @click="handleAddDrug">新增药品</el-button>
                            <el-button size="small" @click="resetQuery('formQuery')">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

       <div id="table">
            <el-table border :data="list" style="width: 100%" v-loading="loading" >
                <el-table-column type="index" width="65" label="#序号" align="center"/>
                <el-table-column prop="name" label="药品名称" width="200" align="center"></el-table-column>
                <el-table-column prop="drugTypeName" label="类别" width="150" align="center"></el-table-column>
                <el-table-column prop="standard" label="规格" width="120" align="center"></el-table-column>
                <el-table-column prop="space" label="货位" width="150" align="center"></el-table-column>
                <el-table-column prop="company" label="厂家" width="160" align="center"/>
                <el-table-column prop="company" label="生产日期" width="160" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.productionDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="过期" width="120" align="center">
                    <template slot-scope= "scope" width ="140" >
                        <el-tag type="danger" v-if="scope.row.status == 1">过期</el-tag>
                        <el-tag type="success" v-if= "scope.row.status ==0">未过期</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope" >
                        <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-view"
                                       @click="detail(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" v-if="scope.row.status == '1' " effect="dark" content="删除" placement="top-start">
                            <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block" style="margin-top: 10px;position: absolute;right: 0;">
                <el-pagination :page-sizes="[10]" :page-size="listQuery.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
       </div>

       <el-dialog title="药品详情" :visible.sync="detailDialog">
           <el-row class="rowDetail">
               <el-col :span="6">
                   <span>药名:</span><span class="textDetail">{{drugDetail.name}}</span>
               </el-col>
                <el-col :span="6">
                   <span>类别:</span><span class="textDetail">{{drugDetail.drugTypeName}}</span>
               </el-col>
               <el-col :span="6">
                   <span>规格:</span><span class="textDetail">{{drugDetail.standard}}</span>
               </el-col>
                <el-col :span="6">
                   <span>用量:</span><span class="textDetail">{{drugDetail.dosage}}</span>
               </el-col>               
           </el-row>
           <el-row class="rowDetail">
                <el-col :span="6">
                   <span>单位:</span><span class="textDetail">{{drugDetail.unit}}</span>
               </el-col>
               <el-col :span="6">
                   <span>价格:</span><span class="textDetail">{{drugDetail.price}}</span>
               </el-col>
                <el-col :span="6">
                   <span>保质期:</span><span>{{drugDetail.shelfLife}}天</span>
               </el-col>
               <el-col :span="6" >
                   <span>生产日期:</span><span>{{drugDetail.productionDate}}</span>
               </el-col>
           </el-row>
            <el-row class="rowDetail">
                <el-col :span="6">
                   <span>过期时间:</span><span>{{drugDetail.outDate}}</span>
               </el-col>
           </el-row>
       </el-dialog>

        <!--新增或修改药品信息框-->
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="50%">
            <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="80px">
                <el-form-item label="药名" prop="name">
                    <el-input size="small" v-model="form.name" placeholder="请输入药名信息"
                               style="width: 45%;"/>
                </el-form-item>
                <el-form-item label="类别" prop="drugTypeId">
                    <el-select size="small" style="width: 45%" v-model="form.drugTypeId" placeholder="请选择药品类别"
                                clearable>
                        <el-option  :key="item.id" v-for ="item in drugTypeList" :label="item.typeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="规格" prop="standard">
                    <el-input size="small" style="width: 45%;" v-model="form.standard" placeholder="请输入规格"/>
                </el-form-item>
              <el-form-item label="用量" prop="dosage">
                <el-input size="small" style="width: 45%;" v-model="form.dosage" placeholder="请输入用量"/>
              </el-form-item>
             <el-form-item label="单位" prop="unit">
                <el-input size="small" style="width: 45%;" v-model="form.unit" placeholder="请输入单位"/>
              </el-form-item>
             <el-form-item label="厂商" prop="company">
                <el-input size="small" style="width: 45%;" v-model="form.company" placeholder="请输入厂商"/>
              </el-form-item>
             <el-form-item label="货位" prop="space">
                <el-input size="small" style="width: 45%;" v-model="form.space" placeholder="请输入用量"/>
              </el-form-item>
              <el-form-item label="保质期" prop="shelfLife">
                <el-input size="small" style="width: 45%;" v-model="form.shelfLife" placeholder="请输入保质期"/>
              </el-form-item>
             <el-form-item label="价格" prop="price">
                <el-input size="small" style="width: 45%;" v-model="form.price" placeholder="请输入价格"/>
              </el-form-item>
              <el-form-item label="生产日期" prop="productionDate">
                    <el-date-picker v-model="form.productionDate" value-format="yyyy-MM-dd" type="date" placeholder="选择生产日期"></el-date-picker>
              </el-form-item>
             <el-form-item label="库存" v-if="this.dialogStatus == 'update'" >
                    <el-input size="small" style="width: 45%;" v-model="form.stock" placeholder="请输入库存"/>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="submit('form')">确定</el-button>
            </div>
        </el-dialog>



       <!--新增或修改药品框-->
        <el-dialog :title="textMap2[dialogStatus]" :visible.sync="dialogVisible2" width="50%">
            <el-form ref="form2" :rules="rules2" :model="form2" label-position="left" label-width="80px">
                <el-form-item label="药名" prop="value3">
                        <el-autocomplete size="small" style="width: 37%;" v-model="value3" :fetch-suggestions="querySearchAsync" placeholder="请输入药名" @select="handleSelect" ></el-autocomplete>
                </el-form-item>
                <el-form-item label="数量" prop="num">
                    <el-input size="small" v-model="form2.num" placeholder="请输入药品数量"
                               style="width: 37%;"/>
                </el-form-item>                                 
                <el-form-item label="入库时间" prop="intstockTime">
                    <el-date-picker v-model="form2.intstockTime" value-format="yyyy-MM-dd" type="date" placeholder="选择生产日期"></el-date-picker>
                </el-form-item>           
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="submit2('form2')">确定</el-button>
            </div>
        </el-dialog>



 
    </div>
</template>
<script>
export default {
    name:'Info',
    data(){
        return{
            list: [],
            listQuery: {
                pageNum: 1,
                pageSize: 10
            },
            formQuery: {},
            total: 0,
            loading: false,
            date: null,
            value2: undefined,
            value3: undefined,
            drugTypeList:[],
            detailDialog: false,
            drugDetail:{},
            form:{},
            form2:{},
            dialogStatus:'create',
            dialogVisible:false,
            dialogVisible2:false,
            textMap: {
                update: "编辑药品信息",
                create: "新增药品信息"
            },
            textMap2: {
                update: "编辑药品",
                create: "新增药品"
            },
            rules: {
                name: [{required: true, message: '请输入药名', trigger: 'blur'}],
                standard: [{required: true, message: '请输入规格', trigger: 'blur'}],
                space: [{required: true, message: '请输入货位', trigger: 'blur'}],
                unit: [{required: true, message: '请输入单位', trigger: 'blur'}],
                dosage: [{required: true, message: '请输入用量', trigger: 'blur'}],
                price: [{required: true, message: '请输入价格', trigger: 'blur'}],
                productionDate: [{required: true, message: '请选择生产日期', trigger: 'blur'}],
                shelfLife: [{required: true, message: '请输入保质期', trigger: 'blur'}],
                company: [{required: true, message: '请输入厂商', trigger: 'blur'}],
                drugTypeId: [{required: true, message: '请选择类型', trigger: 'blur'}],
            },
            rules2:{
                //value3: [{required: true, message: '请输入药名', trigger: 'blur'}],
                instockTime: [{required: true, message: '请输入入库时间', trigger: 'blur'}],
                num: [{required: true, message: '请输入入库数量', trigger: 'blur'}],
            }
        }
    },
    methods:{
      //点击出现搜索后点击的每一项
        handleSelect(item) {
            this.id= item.drugInfoId;
            this.name = item.value;
            this.form2.drugInfoId = item.drugInfoId;
        },
        querySearchAsync(queryString, cb){
            //console.log("ssx"+queryString);
	        var results = []
	        if (queryString == '') {
	          cb(results);
	        }else {
	          this.$get("/drugInfo/search", {key:queryString}).then(res => {
	              if (res.code == 200) {
	                var result = res.data;
	                //循环放到一个远程搜索需要的数组
	                for (let i = 0; i < result.length; i++) {
	                  const element = result[i];
	                  results.push({
	                    value: element.name,
	                    drugInfoId: element.id
	                  })
	                }
	                cb(results);
	              } else {
	                results = []
	                cb(results);
	              }
	            });
            }

        },
        //查询
        search() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        getList() {
            this.loading = true;
            this.$post("/drugInfo/list", this.listQuery).then(res => {
                if (res.code == 200) {
                    this.list = res.data.records;
                    this.total = res.data.total;
                    this.loading = false;
                }
            });
        },
        getDrugType(){
            this.$get("/drugType/getList").then(res => {
                if (res.code == 200) {
                    this.drugTypeList = res.data;
                }
            })
        },
        init(){
            this.getDrugType();
            this.getList();
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //清空搜索条件
        resetQuery(formName) {
            this.$refs[formName].resetFields();
        },
        //分页改变
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        //详情
        detail(row){
            this.drugDetail = row;
            this.detailDialog =true;
        },
        //编辑
        handleEdit(row) {
            this.dialogStatus = "update";
            this.form = row;
            //this.form.id = row.id;
            this.dialogVisible = true;
        },
        //提交
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                console.log(this.form);
                if (valid) {
                    this.$post("/drugInfo/save", this.form).then(res => {
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            //关闭对话框
                            this.dialogVisible = false;
                            //重新渲染数据
                            this.getList();
                        }
                        else {
                            this.$message.error(res.msg);
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        
        submit2(formName) {
            console.log(this.form2);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post("/drug/save", this.form2).then(res => {
                        if (res.code == 200) {
                            this.$message.success("操作成功");
                            //关闭对话框
                            this.dialogVisible2 = false;
                            //重新渲染数据
                            this.getList();
                        }
                        else {
                            //this.$message.error(res.msg);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },        
        //新增药品信息
        handleAdd(){
            this.dialogStatus = "create";
             this.form = {};
            this.dialogVisible = true;
        },
        //新增药品
        handleAddDrug(){
            this.dialogStatus2 = "create";
             this.form2 = {};
            this.dialogVisible2 = true;
        },
        handleDelete(row){
            var id = row.drugId;
            this.$confirm('此操作删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$get('/drug/delete', {drugId: id}).then(res => {
                //console.log(res);
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.getList();
                }else{
                    this.$message.error(res.msg);
                }
                });
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
        }

    },
    created(){
        this.init();
    }
}
</script>
<style scoped>
    .rowDetail{
        margin-bottom: 20px;
    }
    .textDetail{
        margin-left: 5px;
    }
</style>